<template>
  <div class="play-lists">
    <div class="table-container">
      <table>
        <tr class="lists th">
          <td class="songs">歌曲</td>
          <td class="songers">歌手</td>
          <td class="time">发行时间</td>
          <td class="version">版本</td>
        </tr>
        <tr
          class="lists play"
          v-for="(item, index) in playlists[0]"
          :key="item.id"
          :class="index % 2 == 0 ? '' : 'odd'"
          @dblclick="changeState(index)"
        >
          <td class="songs">
            <section class="info">
              <div>
                <img :src="item.al.picUrl" alt="" />
              </div>
              <p>{{ item.name }}</p>
            </section>
            <p class="controller" style="display: none">
              <i
                class="iconfont icon-mv-line player"
                @click="goPlayer(index)"
                title="播放器"
              ></i>
              <i
                class="iconfont icon-zanting_o"
                v-if="!item.resourceState"
                @click="changeState(index)"
                title="播放"
              ></i
              ><i
                class="iconfont icon-bofangqi-bofangshu"
                v-else
                @click="changeState(index)"
                title="暂停"
              ></i>
            </p>
          </td>
          <td class="songers">{{ item.ar[0].name }}</td>
          <td class="time" v-text="publishTime(item.publishTime)"></td>
          <td class="version">{{ item.version }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { getTopSongs } from "../api/request.js";
import emitter from "../bus/index.js";
export default {
  name: "PlayLists",
  setup() {
    //获取路由
    const router = useRouter();
    //歌曲列表
    let playlists = reactive([]);
    //所有歌曲的id
    let ids = [];
    //发行时间
    const publishTime = (time) => {
      let date = new Date(time);
      return `${date.getFullYear()}.${
        date.getMonth() > 9 ? date.getMonth() : "0" + date.getMonth()
      }.${date.getDay() > 9 ? date.getDay() : "0" + date.getDay()}`;
    };
    //歌曲状态切换，并跳转到播放页面
    function changeState(i) {
      playlists[0].forEach((item, index) => {
        if (index == i) {
          item.resourceState = !item.resourceState;
        } else {
          item.resourceState = true;
        }
      });
    }

    // 去到播放页面
    function goPlayer(i) {
      router.push({
        name: "detail",
        params: {
          musicId: playlists[0][i].id, // 需要播放的音乐的id
          allIds: ids, // 全部的歌曲 id
        },
      });
    }

    //切换歌手时，获取对应歌手的歌曲
    emitter.on("sendId", (id) => {
      getTopSongs("artist/top/song", id).then((res) => {
        playlists.length = 0; // 清空数组
        playlists.push(res.data.songs);
        // console.log(playlists);
        // 存储所有歌曲的 id
        playlists[0].forEach((item) => {
          ids.push(item.id);
        });
      });
    });

    return {
      playlists,
      ids,
      publishTime,
      changeState,
      router,
      goPlayer,
    };
  },
};
</script>

<style scoped>
.play-lists {
  padding-left: 30px;
  padding-top: 10px;
  margin-top: 210px;
}
.play-lists .table-container {
  height: 495px;
  overflow-y: scroll;
}

.play-lists .lists {
  width: 70vw;
  display: flex;
  padding: 0 10px;
}
.play-lists .th {
  font-size: 13px;
  color: #777;
}
.play-lists .play {
  padding: 0 10px;
}
.play-lists .play:hover {
  background: rgb(243, 243, 243);
  color: rgb(31, 210, 168);
}

.play-lists .play:hover .controller {
  display: block !important;
}

.play-lists .play td {
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  font-size: 13px;
}
.play-lists .lists .songs {
  flex: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.play-lists .lists .songs .info {
  display: flex;
  align-items: center;
}
.play-lists .lists .songs div {
  display: flex;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin-right: 3px;
}
.play-lists .lists .songs img {
  width: 30px;
  height: 30px;
}
.play-lists .lists .songs .controller {
  position: relative;
  margin-right: 20px;
  width: 25px;
  height: 25px;
}
.play-lists .lists .songs .controller i {
  font-size: 30px;
  position: absolute;
  top: -7px;
}
.play-lists .lists .songs .controller .player {
  right: 40px;
  font-size: 27px;
}
.play-lists .lists .songers {
  flex: 1;
}
.play-lists .lists .time {
  flex: 2;
}
.play-lists .lists .time button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgb(209, 250, 229);
}
.play-lists .lists .size {
  flex: 1;
}
.play-lists .lists .version {
  flex: 1;
}

/* 整个滚动条 */
/* ::-webkit-scrollbar { */
/* 对应纵向滚动条的宽度 */
/* width: 5px; */
/* 对应横向滚动条的宽度 */
/* height: 0px; */
/* } */

/* 滚动条上的滚动滑块 */
/* ::-webkit-scrollbar-thumb {
  background-color: rgba(45, 41, 41, 0.5);
  border-radius: 32px;
} */

/* 滚动条轨道 */
/* ::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 32px;
} */
.odd {
  background: rgba(200, 197, 197, 0.3);
}
</style>